

import React, { useEffect, useState } from 'react';
import { Table, Input, Button  } from 'antd';
import { Link, NavLink } from 'umi';
import { ISkillLabel, ISkillListItem, ISkillListQuery } from '@/utils/interface';
import { getSkillLabel, getSkillList } from '@/services';
import classNames from 'classnames';
import { EyeOutlined, RollbackOutlined, FormOutlined, DeleteOutlined, DeliveredProcedureOutlined, SearchOutlined } from '@ant-design/icons';
// 直接引入样式
import './postSkill.less'
// 启用了css module
import styles from './postSkill.less'
import { observer } from 'mobx-react-lite';
import useStore from '@/context/useStore';
// import { Skill } from '@/store';
const status = ['全部', '草稿', '已发布', '待审核', '已驳回'];



const postSkill: React.FC = props => {

    ///////

    const columns = [
        {
            title: '岗位名称',
            dataIndex: 'name',
        },
        {
            title: '专业',
            dataIndex: 'majorName',
        },
        {
            title: '版本号',
            dataIndex: 'stationVersion',
        },
        {
            title: '技能数量',
            dataIndex: 'skillNum',
        },
        {
            title: '作者',
            dataIndex: 'userName',
        },
        {
            title: '发起时间',
            dataIndex: 'createTime',
        },
        {
            title: '状态',
            render: (row: ISkillListItem) => <span className={styles[`status${row.status}`]}> {status[Number(row.status)]}</span>
        }, {
            title: '操作',
            render: (row: ISkillListItem) => {
                let statuSum = row.status;
                
                if (statuSum === '3') {
                    return <div className={styles.action}>
                        <EyeOutlined style={{ color: '#679cf6' }} />
                        <RollbackOutlined style={{ color: '#679cf6' }} />
                    </div>
                } else if (statuSum === '1') {
                    return <div className={styles.action}>
                        <NavLink to={`/teachers/addPostSkill?stationVersionId=${row.stationVersionId}&see=false`}>
                            <FormOutlined style={{ color: '#679cf6' }}/>
                        </NavLink>
                        <DeliveredProcedureOutlined style={{ color: '#679cf6' }} />
                        <DeleteOutlined style={{ color: '#679cf6' }} onClick={()=>{
                            DeleteListItem(row.stationVersionId)
                        }}/>
                    </div>
                }
            }
        }
    
    ];
    let [curSkill, setCurSkill] = useState('')
    let [curStatus, setCurStatus] = useState(0);
    let [dataSource, setDataSource] = useState<ISkillListItem[]>([]);
    let [skillLabel, setSkillLabel] = useState<ISkillLabel[]>([]);
    let [isMyInfo, setIsMyInfo] = useState(false);
    let [searchTitle, SetSearchTitle] = useState('');
    let [title, setTitle] = useState('');
    let { Skill } = useStore();
    useEffect(() => {
        Skill.getSkillLabel();
    }, [])
    
    async function DeleteListItem(ID : string){
        console.log(ID);
        await Skill.DeleteListItem(ID);

        let queryParams: ISkillListQuery = {} as ISkillListQuery;
        if (curStatus) {
            queryParams = { ...queryParams, isMyInfo, searchTitle, majorId: curSkill, status: curStatus }
        }
        else {
            queryParams = { ...queryParams, isMyInfo, searchTitle, majorId: curSkill, status: '' as unknown as number }
        }
        await getSkillList(queryParams).then(res => {
            if (res.code == 200) {
                setDataSource(res.rows);
            }

        })
    }


    useEffect(() => {
        let queryParams: ISkillListQuery = {} as ISkillListQuery;
        if (curStatus) {
            queryParams = { ...queryParams, isMyInfo, searchTitle, majorId: curSkill, status: curStatus }
        }else {
            queryParams = { ...queryParams, isMyInfo, searchTitle, majorId: curSkill, status: '' as unknown as number }
        }
        getSkillList(queryParams).then(res => {
            if (res.code == 200) {
                setDataSource(res.rows);
            }
        })
    }, [curSkill, curStatus, isMyInfo, searchTitle])
    
    return <div className="postSkill">
        <section>
            <section>
                <ul className='profession'>
                <span>专业：</span>{
                    [{ id: '', name: '全部' }, ...Skill.skillLabel].map(item => {
                        return <span className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurSkill(item.id)} key={item.id}>{item.name}</span>
                    })
                }</ul>
            </section>
            <section>
               
                <ul className='state'> <span>状态：</span>{
                    status.map((item, index) => {
                        return <span key={index} className={index === curStatus ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurStatus(index)}>{item}</span>
                    })
                }</ul>
            </section>
        </section>
        <div className='Form'>
            <div>
                <input type="checkbox" checked={isMyInfo} onChange={(e) => setIsMyInfo(e.target.checked)} />仅看我的
            </div>
            <Input placeholder="搜索岗位" suffix={<SearchOutlined onClick={() => { SetSearchTitle(title) }} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                if (e.keyCode === 13) {
                    SetSearchTitle(title)
                }
            }} />
            <Link to="/teachers/addPostSkill?see=false">
                <Button type="primary">+添加岗位</Button>
            </Link>
        </div>
        <Table rowKey="stationId" dataSource={dataSource} columns={columns}></Table>
    </div>



}
export default observer(postSkill);

